<template>
  <div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
    <div class="item6">Footer</div>
    <div class="item7">Footer</div>
    <div class="item8">Footer</div>
    <div class="item9">Footer</div>
    <div class="item10">Footer</div>
    <div class="item11">Footer</div>
    <div class="item12">Footer</div>
    <div class="item13">Footer</div>
    <div class="item14">Footer</div>
    <div class="item15">Footer</div>
    <div class="item16">Footer</div>
    <div class="item17">Footer</div>
    <div class="item18">Footer</div>
  </div>
</template>
<script>
export default {
  name: "demo-1",
};
</script>
<style scoped>
.grid-container {
  border: 2px solid #ccc;
  width: 100%;
  display: grid; /* 需要添加 display: grid 以启用网格布局 */
  grid-template-areas:
    "item1 item2 item2 item2 item3 item4 item5 item6"
    "item1 item2 item2 item2 item7 item8 item9 item10"
    "item11 item12 item13 item14 item15 item16 item17 item18";
  gap: 2px;
  background: #ccc;
  height: 200px;
}
.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}
.item7 {
  grid-area: item7;
}
.item8 {
  grid-area: item8;
}
.item9 {
  grid-area: item9;
}
.item10 {
  grid-area: item10;
}
.item11 {
  grid-area: item11;
}
.item12 {
  grid-area: item12;
}
.item13 {
  grid-area: item13;
}
.item14 {
  grid-area: item14;
}
.item15 {
  grid-area: item15;
}
.item16 {
  grid-area: item16;
}
.item17 {
  grid-area: item17;
}
.item18 {
  grid-area: item18;
}
div {
  background: #fff;
  text-align: center;
}
</style>
